<template>
  <div class="app-container">
    <el-dialog :model-value="itemsVisible" title="选择一上预算编制" :append-to-body="true" width="80%" height="1000px" @close="closeBtn">
      <div class="filter-container">
        <el-form :inline="true" :model="listQuery" class="demo-form-inline">
          <el-form-item prop="code" label="项目编号">
            <el-input v-model="listQuery.code" placeholder="项目编号" style="width: 200px;" />
          </el-form-item>
          <el-form-item prop="name" label="项目名称">
            <el-input v-model="listQuery.name" placeholder="项目名称" style="width: 200px;" />
          </el-form-item>
          <el-form-item prop="viability" label="存续状态">
            <el-select v-model="listQuery.viability" class="m-2" placeholder="请选择">
              <el-option key="" label="全部" value="" />
              <el-option v-for="item in getDictList('BudgetProjectViability')" :key="item.key" :label="`${item.key} - ${item.value}`" :value="item.key" />
            </el-select>
          </el-form-item>
          <el-form-item prop="source" label="项目来源">
            <el-select v-model="listQuery.source" class="m-2" placeholder="请选择">
              <el-option key="" label="全部" value="" />
              <el-option v-for="item in getDictList('BudgetProjectSource')" :key="item.key" :label="`${item.key} - ${item.value}`" :value="item.key" />
            </el-select>
          </el-form-item>
          <el-form-item prop="attribute" label="项目属性">
            <el-select v-model="listQuery.attribute" class="m-2" placeholder="请选择">
              <el-option key="" label="全部" value="" />
              <el-option v-for="item in getDictList('BudgetProjectAttribute')" :key="item.key" :label="`${item.key} - ${item.value}`" :value="item.key" />
            </el-select>
          </el-form-item>
          <el-form-item prop="state" label="状态">
            <el-select v-model="listQuery.state" class="m-2" placeholder="请选择" :disabled="props.state">
              <el-option key="" label="全部" value="" />
              <el-option v-for="item in getEnumList('BudgetState')" :key="item.key" :label="item.value" :value="item.key" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="success" icon="Search" @click="handleFilter">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="app-container">
        <el-table
          v-loading="listLoading"
          :data="projectList"
          border
          fit
          tooltip-effect="dark"
          style="width: 100%; margin-bottom: 20px;"
          @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
          <el-table-column align="center" type="index" label="序号" width="60px" />
          <el-table-column align="center" label="二上预算编号" prop="code" min-width="105px" sortable show-overflow-tooltip>
            <template v-slot="{row}">{{ row.code }}</template>
          </el-table-column>
          <el-table-column align="center" label="二上预算名称" prop="name" min-width="105px" sortable show-overflow-tooltip>
            <template v-slot="{row}">{{ row.name }}</template>
          </el-table-column>
          <el-table-column align="center" label="存续状态" prop="viability" min-width="105px" sortable show-overflow-tooltip>
            <template v-slot="{row}"><DictTag :dict-list="getDictList('BudgetProjectViability')" :dict-key="row.viability" /></template>
          </el-table-column>
          <el-table-column align="center" label="项目来源" prop="source" min-width="105px" sortable show-overflow-tooltip>
            <template v-slot="{row}"><DictTag :dict-list="getDictList('BudgetProjectSource')" :dict-key="row.source" /></template>
          </el-table-column>
          <el-table-column align="center" label="项目属性" prop="attribute" min-width="105px" sortable show-overflow-tooltip>
            <template v-slot="{row}"><DictTag :dict-list="getDictList('BudgetProjectAttribute')" :dict-key="row.attribute" /></template>
          </el-table-column>
          <el-table-column align="center" label="状态" prop="state" min-width="120px" sortable show-overflow-tooltip>
            <template v-slot="{row}"><EnumTag :enum-list="getEnumList('BudgetState')" :enum-key="row.state" /></template>
          </el-table-column>
          <el-table-column align="center" label="创建时间" width="180px" prop="createTime" sortable show-overflow-tooltip>
            <template v-slot="{row}"><DateTag :timestamp="row.createTime" /></template>
          </el-table-column>
          <el-table-column align="center" label="最后修改时间" width="180px" prop="updateTime" sortable show-overflow-tooltip>
            <template v-slot="{row}"><DateTag :timestamp="row.updateTime" /></template>
          </el-table-column>
        </el-table>
        <pagination v-model:total="total" v-model:page="listQuery.pageNum" v-model:limit="listQuery.pageSize" @pagination="getList" class="pagination-model" />
        <div style="text-align:right;margin: 1.875rem 0;">
          <el-button type="danger" @click="closeBtn">关闭</el-button>
          <el-button type="primary" @click="onSureBtn">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import {ref, watch} from 'vue'
import {doGet} from "@/config/http";
import {svc, getDictList, getEnumList, alertErrorMsg} from "@/config/common";

const props = defineProps({
  itemsVisible: {
    required: true,
    type: Boolean,
  },
  state: {
    required: false,
    type: String,
  },
})

let projectList = ref([])
let listLoading = ref(true)
let total = ref(0)
let listRow = []
let listQuery = ref({
  pageNum: 1,
  pageSize: 10,
  sortField: 'id',
  sortType: 'desc',
  projectTwoId: null,
  name: null,
  viability: null,
  source: null,
  attribute: null,
  totalFund: null,
  putinFund: null,
  currFund: null,
  useGovId: null,
  applyGovId: null,
  previousArrange: null,
  managerOrgId: null,
  managerName: null,
  managerUserContact: null,
  workGovId: null,
  workUserId: null,
  workUserContact: null,
  state: null,
  startTime: null,
  endTime: null,
  isDebenture: null,
  isScientific: null,
  isConstruction: null,
  constructionDesc: null,
  isAgent: null,
  agentGovId: null,
  isGovernmentPurchase: null,
  purchaseProject: null,
  purchaseKind: null,
  purchaseRequire: null,
  purchaseDateStart: null,
  purchaseDateEnd: null,
  purchaseAttr: null,
  purchaseFund: null,
  purchasePrice: null,
  purchaseNum: null,
  purchaseUnit: null,
  createTimeStart: null,
  createTimeEnd: null,
  updateTimeStart: null,
  updateTimeEnd: null,
})

const emit = defineEmits(['close', 'budgetTwoSelect'])

watch(() => [props.itemsVisible, props.state], async vals => {
  let visible = vals[0]
  let state = vals[1]
  if (state) {
    listQuery.value.state = state
  } else {
    listQuery.value.state = null
  }
  if (visible === true) {
    await getList()
  }
})

// 获取数据
async function getList() {
  listLoading.value = true
  let res = await doGet(svc, '/budget-two/page', listQuery.value)
  listLoading.value = false
  total.value = parseInt(res['total'])
  projectList.value = res['records']
  listRow = []
}

// 查询
async function handleFilter() {
  listQuery.value['pageNum'] = 1
  await getList()
}

// 关闭弹层
function closeBtn() {
  emit('close')
}

// 选择
function handleSelectionChange(val) {
   listRow = val
}

// 点确定
function onSureBtn() {
  if (listRow.length === 0) {
    alertErrorMsg('请选择二上预算')
    return
  }
  emit('budgetTwoSelect', listRow)
  emit('close')
}
</script>
<style>
.pagination-model {
  right: 36px !important;
}
</style>
